<template>
  <view class="massAide">
    <!-- 历史列表 -->
    <view v-if="result.data.length <= 0 && result.isEnd" style="height: 80vh;">
      <u-empty mode="data" text="暂无群发记录"></u-empty>
    </view>
    <view class="history-list" v-else>
      <view class="cell" v-for="(item, index) in result.data" :key="index">
        <view class="addressee">
          <text class="title">{{item.users.length}}位收件人</text>
          <text class="nickname">{{item.users.join('、')}}</text>
        </view>
        <view class="content">
          <text>{{item.message}}</text>
        </view>
        <view class="btn-box">
          <view class="btn flex flex-ai-c flex-jc-c" @click="onClickAgain(item.sendMessageUserRelations)"><text>再发一条</text></view>
        </view>
      </view>
      <view class="loading-status" v-if="result.data.length > 0 || result.PageIndex !== 1"><u-loadmore :status="result.status" /></view>
    </view>
    
    <!-- 底部新建按钮 -->
    <view class="footer">
      <view class="btn flex flex-ai-c flex-jc-c" @click="onClickNewBuild">
        <u-icon name="plus-circle" size="40rpx" color="#333"></u-icon>
        <text class="text">新建群发</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: {
        PageIndex: 1,
        PageSize: 20,
        isEnd: false,
        loading: false,
        status: 'loading',
        data: []
      },
    }
  },
  onLoad() {
    uni.showLoading({
      title: '加载中'
    })
  },
  onShow() {
    this.getGroupSendMessageListPage(true)
  },
  methods: {
    onClickNewBuild() {
      uni.navigateTo({
        url: '/pages_chat/mass/chooseAddressee/chooseAddressee'
      })
    },
    // 计算总共有多少页
    pageCount (totalnum,limit){
      return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0
    },
    // 获取群发记录
    async getGroupSendMessageListPage(init) {
      let res = this.result
      if(init) {
        res.loading = false
        res.PageIndex = 1
        res.isEnd = false
      }
      if (res.loading || res.isEnd) {
        return false
      }
      res.loading = true
      this.result = res
    
      try{
        let resData = await this.$api.chat.GetGroupSendMessageListPage({
          pageIndex: res.PageIndex,
          pageSize: res.PageSize,
        })
        resData = resData.data
        let list = resData.list.map(item => {
          item.users = item.sendMessageUserRelations.map(user => {
            return user.nickName
          })
          return item
        })
    
        if (res.PageIndex === 1) {
          res.data = []
        }
    
        // 如果返回数据列表为空，或者当前页数大于总页数代表已经到最后一页了
        if(list.length <= 0 || res.PageIndex >= this.pageCount(resData.list.total, res.PageSize)) {
          res.isEnd = true
          res.status = 'nomore'
        }
    
        if (list.length > 0) {
          res.data = res.data.concat(list)
          res.PageIndex = res.PageIndex + 1
        }
        res.loading = false
        this.result = res
        uni.hideLoading()
      }catch(e){
        uni.hideLoading()
      }
    },
    // 点击再发一条
    onClickAgain(data) {
      data = data.map(item => {
        return {
          id: item.user_id,
          name: item.nickName,
          type: item.type === 1 ? 'GROUP' : 'C2C'
        }
      })
      this.$store.commit('massTempData', data)
      uni.navigateTo({
        url: '/pages_chat/chat/chat?type=MASS&id='
      })
    }
  },
  onReachBottom() {
    this.getGroupSendMessageListPage()
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.massAide{
  padding-bottom: 100rpx;  
  padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  
  .history-list{
    overflow: hidden;
    .cell{
      margin: 24rpx;
      background-color: #fff;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
      border-radius: 10rpx;
      padding: 0 16rpx 24rpx;
      .addressee{
        padding: 26rpx 0 16rpx;
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        color: #666;
        border-bottom: 2rpx solid #eee;
        .nickname{
          margin-top: 10rpx;
        }
      }
      .content{
        padding: 28rpx 12rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        line-height: 44rpx;
      }
      .btn-box{
        display: flex;
        justify-content: flex-end;
        .btn{
          width: 130rpx;
          height: 52rpx;
          background-color: #D4D4D4;
          border-radius: 26rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  .loading-status{
    padding: 40rpx 0;
  }
  
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #fff;
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
    
    .btn{
      height: 100rpx;
      .text{
        font-size: 30rpx;
        color: #333;
        margin-left: 16rpx;
      }
    }
  }
}
</style>
